<template>
  <QuillEditor
    :content="modelValue"
    toolbar="full"
    theme="snow"
    content-type="html"
    :placeholder="placeholder"
    class="quill-editor"
    :class="[type]"
    ref="quillEditorRef"
    @update:content="editorChange"
  ></QuillEditor>
</template>

<script setup lang="ts">
import { QuillEditor } from "@vueup/vue-quill";
import { ref, watch } from "vue";

type Props = {
  modelValue: string;
  placeholder?: string;
  type: "modal";
};
const props = defineProps<Props>();
const emits = defineEmits(["update:modelValue"]);
const quillEditorRef = ref();
const editorChange = (value: string) => {
  let realText = quillEditorRef.value.getText().trim();
  if (realText.length == 0) return;
  emits("update:modelValue", value);
};

watch(
  () => props.modelValue,
  (value) => {
    if (value.trim().length == 0) {
      quillEditorRef.value.setContents("");
    }
  }
);
</script>
<style></style>

<style lang="less">
.quill-editor {
  text-transform: unset;

  &.modal {
    height: 400px;
  }
}
</style>
